<script setup>
import { onMounted, ref } from 'vue'
import { getMessageCaptchaApi } from '@/apis/user'
import { useUserStore } from '../../../store/user';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { MESSAGE_LOGIN } from '@/constant/messageCaptchaType'
import useGetMessageCaptcha from '../../../hooks/useGetMessageCaptcha';

const userStore = useUserStore();
const router = useRouter();
const { getMessageCaptcha } = useGetMessageCaptcha();

//准备一个和校验项一致的双向绑定数据
const form = ref({
  phone: '',
  messageCaptcha: '',
})
const formEl = ref(null)
//准备一个校验规则
const rules = {
  //每一个表单项对应一个数组，数组内可以定义多个对象
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  messageCaptcha: [
    { required: true, message: '验证码不能为空', trigger: 'change' },
    { min: 4, max: 4, message: '验证码长度为4位', trigger: 'change' }
  ],
}







//发送手机短信验证
const codeButton = ref(null)
const getMessage = () => {
  formEl.value.validateField('phone', (valid) => {
    if (valid) {
      getMessageCaptcha(codeButton, 'messageCount')

      //调用发送短信接口
      // getMessageCaptchaApi({ phone: form.value.phone, captchaType: MESSAGE_LOGIN })
    }
  })
}



const login = () => {
  const { phone, messageCaptcha } = form.value
  //formEl是elementUI的表单对象，validate方法可以校验表单是否合法
  formEl.value.validate(async (valid) => {
    //valid是校验结果，true表示校验通过，false表示校验失败
    if (valid) {
      //登录接口
      try {
        await userStore.messageLogin({ phone, messageCaptcha });
        //登录成功后跳转到首页
        ElMessage({ type: 'success', message: '登录成功' })
        router.push('/')
      } catch (error) {

      }
    }
  })
}



onMounted(() => {
  // 验证码倒计时
  let count = localStorage.getItem('messageCount')
  if (count) {
    codeButton.value.disabled = true
    getMessageCaptcha(codeButton, 'messageCount')
  }

})


</script>

<template>

  <div class="title">
    <!-- <svg-icon class="hidden-sm-and-up" name="zuojiantou"></svg-icon> -->
    <h2>欢迎( ๑╹ ꇴ╹) ｸﾞｯ! </h2>
  </div>

  <div class="login-switch">
    <router-link to="/login/passwordLogin">
      <a class="password-login" :underline="false">密码登录</a>
    </router-link>

    <router-link to="/login/messageLogin">
      <a class="message-login active" :underline="false">短信登录</a>
    </router-link>

  </div>


  <div class="form">
    <!-- :model 是elementUI的一个属性，把响应式数据form和这个表单关联在一起, :rules 是elementUI的一个属性，把这个from和一个规则对象绑定在一起-->
    <el-form :model="form" :rules="rules" ref="formEl" label-position="right" label-width="60px" status-icon>
      <!-- <el-form-item>上的prop绑定的是自己定义的规则，名字相对应  -->
      <el-form-item label-width="70px" prop="phone" label="手机号">
        <!-- 最终的输入框 双向绑定form中对应的字段 -->
        <el-input v-model="form.phone" @keyup.enter="login" placeholder="请输入手机号" size="large" />
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item label-width="70px" class="get-code" prop="messageCaptcha" label="验证码">
        <el-input v-model="form.messageCaptcha" placeholder="验证码随便填，不影响功能" size="large" />
        <div class="codeBtn">
          <button @click="getMessage" ref="codeButton">获取验证码</button>
        </div>
        <!-- <img :src="captcha" @click="changeCaptcha"> -->
      </el-form-item>

      <el-form-item prop="agree" label-width="22px">
        <el-checkbox v-model="form.agree" size="large">
          我已同意隐私条款和服务条款
        </el-checkbox>
      </el-form-item>

      <el-button size="large" class="subBtn" @click="login">点击登录</el-button>
    </el-form>

  </div>

  <div class="login-foot">
    <router-link to="/login/forgetPassword">
      <a>忘记密码</a>
    </router-link>
    <router-link to="/login/register">
      <a>免费注册</a>
    </router-link>
  </div>


</template>

<style lang='scss' scoped>
.form {

  .subBtn {
    margin-top: 20px;
    width: calc(100% - 20px);
    margin-left: 20px;
    background-color: rgb(255, 98, 0);
    color: white;
  }

  .get-code {
    position: relative;

    .codeBtn {
      position: absolute;
      right: 10px;
      background-color: white;

      & button {
        color: rgb(255, 98, 0)
      }
    }
  }

}


//欢迎标题
.title {
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  & h2 {
    margin: 0 auto;
  }
}

.login-switch {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}


//登录页脚
.login-foot {
  font-size: 1.3rem;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;

  & a:first-child {

    margin-right: 15px;
  }
}


@media screen and (min-width: 768px) {


  .password-login,
  .message-login {
    font-size: 1.6rem;
    font-weight: bold;
    // height: 30px;
    // height: 10px;
  }

}

@media screen and (max-width: 767px) {

  .password-login,
  .message-login {
    font-size: 1.6rem;
    font-weight: bold;
    height: 30px;
    // height: 10px;
  }

}

//动态类
.active {
  color: rgb(255, 98, 0)
}
</style>